<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2802339_75bm3n29x44.css?spm=a313x.7781069.1998910419.42&file=font_2802339_75bm3n29x44.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/first-screen.chunk.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/index.chunk.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/feed.chunk.css">
    <link rel="stylesheet" href="../css/goodslist1.css">
    <link rel="stylesheet" href="../css/demo.css">
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/goodlist.js"></script>
    <style>
        body {
            background-color: #f4f4f4;
        }

        .lazyimg_img {
            opacity: 1;
        }

        .searchList {
            width: 450px;
            position: absolute;
            top: 80px;
            background-color: white;
            border: 1px solid grey;
            z-index: 9999;
            display: none;
        }

        .searchList li {
            line-height: 32px;
            text-indent: 10px;
            font-size: 14px;
            color: black;
        }

        .searchList li:hover {
            color: white;
            background-color: skyblue;

        }
    </style>
</head>

<body>
    <header>
        <div class="header">
            <div class="left">
                <ul class="heardeleft">
                    <a href="./index.html">
                        <li>返回首页</li>
                    </a>
                    <li>网站导航</li>
                    <li>商家入驻</li>
                    <li>客户服务</li>
                    <li>网页无障碍</li>
                </ul>
                <span class="iconfont">&#xe645;</span>
                <select>
                    <option value="武汉">武汉</option>
                    <option value="郑州">郑州</option>
                </select>
            </div>
            <div class="right">
                <ul>
                    <div class="show">
                        <a href="javascript:;" class="login">
                            <li>请登录</li>
                        </a>
                        <a href="./resigter.html">
                            <li>注册有礼</li>
                        </a>
                    </div>
                    <div class="hide">
                        <a href="javascript:;" class="tips">欢迎:xxx</a>
                        <a href="javascript:;" class="a1">退出</a><br>
                    </div>
                    <li>我的订单</li>
                    <li>我的易购</li>
                    <li>苏宁会员</li>
                    <a href="javascript:;">
                        <li class="shoptocar">购物车</li>
                    </a>
                    <li>易付宝</li>
                    <li>企业采购</li>
                    <li>手机苏宁</li>
                </ul>
            </div>
        </div>
    </header>
    <div id="nav">
        <nav>
            <div class="navleft">
                <img src="../img/159642507148437980.png" alt="">
            </div>
            <div class="navright">
                <form onsubmit="return false">
                    <div class="searchBox">
                        <input type="text" class="searchCon" placeholder="商品搜索">
                        <ul class="searchList"></ul>
                        <button class="searchBtn">搜索</button>
                    </div>
                </form>
                <div class="navlist">
                    <ul>
                        <li>小米Note11</li>
                        <li>小米mix4</li>
                        <li>小米11Pro</li>
                        <li>红米K40</li>
                        <li>红米手机</li>
                        <li>小米电视</li>
                        <li>小米空气净化器</li>
                        <li>小米笔记本</li>
                        <li>取暖器</li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="main">
        <div class="contain">
            <div class="bannerleft">
                <div class="bannertop">
                    <span>分类</span>
                </div>
                <div class="bannerbuttom">
                    <ul>
                        <li>
                            <img src="../img/xiao9.png" alt=""><span>手机/运营商/智能数码</span>
                        </li>
                        <li>
                            <img src="../img/xiao10.png" alt=""><span>家用电器/帮客</span>
                        </li>
                        <li>
                            <img src="../img/xiao1.png" alt=""><span>厨卫/生活家电/厨具</span>
                        </li>
                        <li>
                            <img src="../img/xiao2.png" alt=""><span>家具/家装/家纺/灯具</span>
                        </li>
                        <li>
                            <img src="../img/xiao3.png" alt=""><span>食品/酒水/生鲜/特产</span>
                        </li>
                        <li>
                            <img src="../img/xiao4.png" alt=""><span>美妆/个护/清洁/宠物</span>
                        </li>
                        <li>
                            <img src="../img/xiao6.png" alt=""><span>女装/男装/内衣/鞋靴</span>
                        </li>
                        <li>
                            <img src="../img/xiao5.png" alt=""><span>母婴/玩具/车床/童装</span>
                        </li>
                        <li>
                            <img src="../img/xiao7.png" alt=""><span>医药健康/计生情趣</span>
                        </li>
                        <li>
                            <img src="../img/xiao8.png" alt=""><span>理财/分期/便民</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bannerright">
                <img src="../img/i9.png" alt="">
            </div>
        </div>
    </div>

    <div class="result">
        <span>全部结果</span>
        <span class="i1">收起筛选</span>
        <span class="i2">显示筛选</span>
    </div>

    <div class="foot">
        <div class="footnav">
            <span>品牌</span>
            <ul class="footul">
                <li>华为honor</li>
                <li>荣耀MIUI</li>
                <li>小米vivo</li>
                <li>苹果OPPO</li>
                <li>三星</li>
                <li>守护宝OWWO</li>
                <li>欧沃realme（手机）</li>
                <li>魅族SANNAING</li>
                <li>酷派HEEXON</li>
                <li>恒享DOOV</li>
                <li>朵唯纽曼OnePlus</li>
                <li>一加诺基亚nubia</li>
                <li>努比亚</li>
            </ul>



        </div>
        <div class="footnav">
            <span>相关分类</span>

            <ul class="footul">
                <li>双卡双4G</li>
                <li>双卡单4G</li>
                <li>全网通4G</li>
                <li>全网通5G</li>
                <li>双卡双5G</li>
                <li>双卡单5G</li>

            </ul>


        </div>
        <div class="footnav">
            <span>网络制式</span>
            <ul class="footul">
                <li>智能手机</li>
                <li>时尚手机</li>
                <li>拍照手机</li>
                <li>4G手机</li>
                <li>音乐手机</li>
                <li>商务手机</li>
                <li>女性手机</li>
                <li>备用手机</li>
                <li>老人手机</li>
            </ul>
        </div>
        <div class="footnav">
            <span>价格</span>
            <ul class="footul">
                <li>0-500</li>
                <li>1000-1700</li>
                <li>1700-2800</li>
                <li>2800-4500</li>
                <li>4500以上</li>

            </ul>
        </div>
        <div class="footnav">
            <span>屏幕尺寸</span>
            <ul class="footul">
                <li>超大屏</li>
                <li>大屏</li>
                <li>中屏</li>
                <li>小屏</li>
            </ul>
        </div>
        <div class="footnav">
            <span>其他选项</span>
            <ul class="footul">
                <li>机身内存</li>
                <li>选购热点</li>
                <li>运行内存</li>
                <li>电视类型</li>
                <li>手机CPU</li>
                <li>电池容量</li>
            </ul>
        </div>
    </div>

    <form class="search_bar wrap" onsubmit="return false">
        <div class="orderBox">
            <!-- 排序的列(column)名 (id,chinese,math,english,total) -->
            <div class="orderColBox">
                <label>
                    编号
                    <input type="radio" checked="" name="orderCol" class="orderCol" value="id">
                </label>
                <label>
                    价格
                    <input type="radio" name="orderCol" class="orderCol" value="goodsPrice">
                </label>
            </div>
            <!-- 排序的类型  升序 / 降序 -->
            <div class="orderTypeBox">
                <label>
                    升序
                    <input type="radio" checked="" name="orderType" class="orderType" value="asc">
                </label>
                <label>
                    降序
                    <input type="radio" name="orderType" class="orderType" value="desc">
                </label>
            </div>
            <div class="showNumBox">
                <select class="select">
                    <option value="10" selected>每页显示10条</option>
                    <option value="20">每页显示20条</option>
                    <option value="30">每页显示30条</option>
                    <option value="40">每页显示40条</option>
                </select>
            </div>
            <input type="reset" class="resetBtn" value="重置">
        </div>
    </form>
    <div class="grid_c1 more2_inner" clstag="a">
        <div>
            <ul id="feedContent0" class="more2_list clearfix" role="tabpanel" aria-labelledby="feedTab0">
                <!-- <li class="more2_item more2_item_good hover-on">
                    <span class="more2_item_gdot"></span>
                    <a class="more2_lk" href="//item.jd.com/41274326748.html" target="_blank"
                        title="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"
                        aria-label="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"
                        clstag="h|keycount|feed|01#pd_001-a">
                        <div class="lazyimg lazyimg_loaded more2_img"><img
                                src="//img13.360buyimg.com/jdcms/s300x300_jfs/t1/205807/24/10893/193527/616597b0E5ffa878b/9c55ec54e6c8877e.jpg.webp"
                                class="lazyimg_img"
                                alt="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"></div>
                        <div class="more2_info">
                            <p class="more2_info_name">探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132
                                130</p>
                            <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                                <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">489.<span
                                            class="more2_info_price_txt-decimal">00</span></span></div>
                                <div class="more2_price_plus">
                                    <div class="more2_discount">券</div>
                                </div>
                            </div>
                        </div>
                        <div class="more2_item_hover">
                            <div class="more2_item_delete" clstag="h|keycount||feed|01#pd_001-b" title="不喜欢"></div>
                            <div class="more2_item_hd" title="">
                                <div class="more2_item_btn more2_btn_find enable" clstag="h|keycount||feed|01#pd_001-c">
                                    <i class="more2_btn_icon"></i><span>找相似</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li> -->
            </ul>
        </div>
    </div>
    <div class="pageBox">
        <button class="prev">上一页</button>
        <span class="pageTips">1/17</span>
        <button class="next">下一页</button>
    </div>

    <div class="ng-ser-box">
        <div class="contain">
            <div class="ng-ser-box-top">
                <p>
                    <img src="../img/icon30.jpg" alt="">
                    <span>
                        <span>正品保障</span>
                        <span>正品保障、提供发票</span>
                    </span>
                </p>
                <p>
                    <img src="../img/icon31.jpg" alt="">
                    <span>
                        <span>急速物流</span>
                        <span>如约送货、送货入户</span>
                    </span>
                </p>
                <p>
                    <img src="../img/icon32.jpg" alt="">
                    <span>
                        <span>售后无忧</span>
                        <span>30天包退、365天包换</span>
                    </span>

                </p>
                <p>
                    <img src="../img/icon33.jpg" alt="">
                    <span>
                        <span>帮助中心</span>
                        <span>您的购物指南</span>
                    </span>
                </p>
                <p>
                    <img src="../img/icon34.png" alt="">
                    <span>
                        <span>省心购</span>
                        <span>专注好服务</span>
                    </span>
                </p>
            </div>
            <div class="ng-ser-box-buttom">
                <ul>
                    <li>购物指南</li>
                    <li>免费注册</li>
                    <li>会员等级</li>
                    <li>常见问题</li>
                </ul>
                <ul>
                    <li>支付方式</li>
                    <li>苏宁支付</li>
                    <li>网银支付</li>
                    <li>快捷支付</li>
                    <li>分期付款</li>
                    <li>货到付款</li>
                    <li>任性付支付</li>
                </ul>
                <ul>
                    <li>物流配送</li>
                    <li>运费政策</li>
                    <li>物流配送服务</li>
                    <li>签收验货</li>
                    <li>物流查询</li>
                </ul>
                <ul>
                    <li>售后服务</li>
                    <li>退换货政策</li>
                    <li>贵就赔</li>
                    <li>维修/安装</li>
                    <li>订单修改</li>
                    <li>退换货申请</li>
                    <li>我的发票</li>
                </ul>
                <ul>
                    <li>商家服务</li>
                    <li>合作招商</li>
                    <li>培训中心</li>
                    <li>广告服务</li>
                    <li>商家帮助</li>
                    <li>服务市场</li>
                    <li>规则中心</li>
                </ul>
                <ul>
                    <li>身边苏宁</li>
                    <li>全国300多个城市，上万个门店和服务终端期待您的光临，为您提供贴心的服务！</li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>

    $(".searchCon").on("input", function () {
        $(".searchList").css({ display: 'block' })
        var key = $(".searchCon").val();
        // 即时搜索功能=>每次输入关键词=>重新请求
        // 解决方法:动态生成script标签=>设置请求的路径=>当script标签放到页面中时会向src中接口发送请求=>接收返回的jsonp格式的数据
        var script = document.createElement("script")
        script.src = `https://suggest.taobao.com/sug?code=utf-8&q=${key}&_ksTS=1637032362137_481&callback=dong&k=1&area=c2c&bucketid=14`
        document.body.append(script);
        script.onload = function () {//请求成功=>数据=>等脚本中的数据载入完毕=>删除脚本
            script.remove();
        }

    })
    $(".searchCon").focus(function () {
        $(".searchList").css({ display: 'block' })
    })
    $(".searchCon").blur(function () {
        $(".searchList").css({ display: 'none' })
    })

    function dong(data) {
        var { result } = data
        var html = "";
        result.forEach(([q]) => {
            html += `<li>${q}</li>`
        })
        $(".searchList").html(html);
    }

</script>

</html>